import React, { useState, useEffect } from 'react'
import { CardWrap, ContentWrap } from './Style.js'
import { Card, Transfer, Switch, ConfigProvider } from 'antd'
import zhCN from 'antd/es/locale/zh_CN'
function Quanxian() {
  const [oneWay, setOneWay] = useState(false)
  const [mockData, setMockData] = useState([])
  const [targetKeys, setTargetKeys] = useState([])
  useEffect(() => {
    const newTargetKeys = []
    const newMockData = []
    for (let i = 0; i < 2000; i++) {
      const data = {
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
        chosen: Math.random() * 2 > 1,
      }
      if (data.chosen) {
        newTargetKeys.push(data.key)
      }
      newMockData.push(data)
    }

    setTargetKeys(newTargetKeys)
    setMockData(newMockData)
  }, [])
  const onChange = (newTargetKeys, direction, moveKeys) => {
    console.log(newTargetKeys, direction, moveKeys)
    setTargetKeys(newTargetKeys)
  }
  return (
    <ContentWrap>
      <CardWrap>
        <Card title="权限基础知识点">
          <p>权限基础知识点</p>
        </Card>
      </CardWrap>
      <CardWrap>
        <Card title="权限基础使用">
          <ConfigProvider locale={zhCN}>
            <Transfer
              dataSource={mockData}
              targetKeys={targetKeys}
              onChange={onChange}
              render={(item) => item.title}
              oneWay={oneWay}
              pagination
            />
            <br />
            <Switch
              unCheckedChildren="one way"
              checkedChildren="one way"
              checked={oneWay}
              onChange={setOneWay}
            />
          </ConfigProvider>
        </Card>
      </CardWrap>
    </ContentWrap>
  )
}

export default Quanxian
